"use client"

import type React from "react"
import { useState } from "react"
import { ny } from "~/registry/miami/lib/utils"

/**
 * InteractiveGridPattern is a component that renders a grid pattern with interactive squares.
 *
 * @param width - The width of each square.
 * @param height - The height of each square.
 * @param squares - The number of squares in the grid. The first element is the number of horizontal squares, and the second element is the number of vertical squares.
 * @param className - The class name of the grid.
 * @param squaresClassName - The class name of the squares.
 */
interface InteractiveGridPatternProps extends React.SVGProps<SVGSVGElement> {
   width?: number
   height?: number
   squares?: [number, number] // [horizontal, vertical]
   className?: string
   squaresClassName?: string
}

/**
 * The InteractiveGridPattern component.
 *
 * @see InteractiveGridPatternProps for the props interface.
 * @returns A React component.
 */
export function InteractiveGridPattern({
   width = 40,
   height = 40,
   squares = [24, 24],
   className,
   squaresClassName,
   ...props
}: InteractiveGridPatternProps) {
   const [horizontal, vertical] = squares
   const [hoveredSquare, setHoveredSquare] = useState<number | null>(null)

   return (
      <svg
         width={width * horizontal}
         height={height * vertical}
         className={ny(
            "absolute inset-0 h-full w-full border border-gray-400/30",
            className,
         )}
         {...props}
      >
         {Array.from({ length: horizontal * vertical }).map((_, index) => {
            const x = (index % horizontal) * width
            const y = Math.floor(index / horizontal) * height
            return (
               <rect
                  key={index}
                  x={x}
                  y={y}
                  width={width}
                  height={height}
                  className={ny(
                     "stroke-gray-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",
                     hoveredSquare === index
                        ? "fill-gray-300/30"
                        : "fill-transparent",
                     squaresClassName,
                  )}
                  onMouseEnter={() => setHoveredSquare(index)}
                  onMouseLeave={() => setHoveredSquare(null)}
               />
            )
         })}
      </svg>
   )
}
